<template>
	<view class="main" :style="{ '--color': vuex_config.adminTheme, '--price': vuex_config.adminPrice }">
		<view class="main_item">
			<view class="title_box">
				<view class="no_l">订单编号：{{ dataForm.order_no }}</view>
				<view class="no_r">{{ statusFilter(dataForm, 1) }}</view>
			</view>
			<view class="prod_list">
				<view class="prod_item" v-for="(item, index) in dataForm.detailed" :key="index">
					<view class="prod_img">
						<image :src="formatPictureImg(item.product_img)"></image>
					</view>
					<view class="prod_cont">
						<view class="name_main">
							<view class="prod_name u-line-2">{{ item.product_name }}</view>
							<view class="prod_stand">
								<view class="stand_name">
									<text v-if="item.name">商品属性：{{ item.name }}</text>
								</view>
								<view class="buy_num">x{{ item.num }}</view>
							</view>
						</view>
						<view class="prce_box">
							<view class="">
								<view class="price_sign">￥</view>
								<view class="price_num">{{ item.price }}</view>
							</view>
							<template v-if="dataForm.pay_status == 4 && item.express_no && !judeg ">
								<view class="logistics" @click="goLogistic(item)">
									查看物流
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view></view>
		</view>
		<view class="main_item">
			<view class="title_box">
				<view class="title">收件人信息</view>
				<view class="copy" @click="copy">复制</view>
			</view>
			<view class="cell_box">
				<view class="cell_item">
					<view class="cell_l">联系人：</view>
					<view class="cell_r">{{ dataForm.name }}</view>
				</view>
				<view class="cell_item">
					<view class="cell_l">手机号：</view>
					<view class="cell_r">{{ dataForm.mobile }}</view>
				</view>
				<view class="cell_item">
					<view class="cell_l">收货地址：</view>
					<view class="cell_r">
						<view class="r_box">{{ dataForm.address }}</view>
					</view>
				</view>
				<view class="cell_item">
					<view class="cell_l">下单时间：</view>
					<view class="cell_r">{{ dataForm.date_creation | formTime() }}</view>
				</view>
				<view class="cell_item" v-if="dataForm.remark">
					<view class="cell_l">备注：</view>
					<view class="cell_r">{{ dataForm.remark }}</view>
				</view>
			</view>
		</view>
		<view class="btns_box" :class="[dataForm.pay_status ==4?'dan':'']">
			<view class="btn" v-if="dataForm.pay_status == 1" @click="openRefund(dataForm)">退款申请</view>
			<view class="btn" v-if="checkBtn(dataForm, 2)" @click="goDeliver(dataForm)">
				{{ dataForm.pay_status == 1 ? '订单发货' : '修改发货' }}
			</view>
		</view>
		<u-modal v-model="show" :show-cancel-button="true" title="申请退款" @confirm="confirmRefund">
			<view class="refund-box">
				<u-field v-model="refundForm.money" label="退款金额" placeholder="请输入退款金额">
				</u-field>
				<view class="u-font-24 tip">注:最多可退款<text class="price">{{currentOrderItem.total_amount}}</text>元</view>
				<u-field v-model="refundForm.content" label="备注信息" placeholder="请输入备注信息">
				</u-field>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		adminPost,
		GetQueryDataList
	} from '@/common/http.request.js';
	import {
		orderjs
	} from '../../../mixins/business.js';
	import { uniCopy } from '@/utils/uniPromise'
	export default {
		mixins: [orderjs],
		components: {},
		data() {
			return {
				showLogistics: false,
				dataForm: {},
				show: false,
				expressDetail: {},
				page: 1,
				expressList: [{
					name: '客户自提',
					com: 'ziti'
				}],
				judeg: true //判断是否找到快递名称了
			};
		},
		onLoad(options) {
			if (options && options.order_no) {
				this.initPage(options.order_no);
				this.getDetail(options.order_id);
			}
			this.logisticsPage()
		},
		onShow() {
			if (this.dataForm.pk_id) {
				this.initPage();
			}
		},
		methods: {
			initPage(order_no) {
				this.$loading();
				adminPost('orderAllList', {
					name: order_no || this.dataForm.order_no,
					type: 1,
					pk_id:this.vuex_business.pk_id
				}).then(({
					data
				}) => {
					this.dataForm = data[0];
					this.$hide();
				});
			},

			goLogistic(item) {
				let express = this.expressList.filter(el => item.express == el.com)
				this.$linkTo(
					`/package/order/logistic?id=${this.dataForm.pk_id}&express_no=${item.express_no}&express=${item.express}&express_name=${express[0].name}`
				);
			},
			// 						
			logisticsPage() {
				GetQueryDataList('m_common_express', this.page, 500, {}, {
					fuzzy_field: undefined,
					api: true
				}).then(({
					data
				}) => {
					if (Array.isArray(data) && data[0] && this.judeg) {
						this.page += 1
						this.expressList = this.expressList.concat(data)
						this.logisticsPage()
					} else {
						this.judeg = false
					}
				})
			},
			copy(){
				let str =this.dataForm.name + this.dataForm.mobile + this.dataForm.address
				uniCopy(str)
			},

			// 获取订单信息
			getDetail(order_id) {
				this.$loading();
				GetQueryDataList('b_order_express', 1, 1, {
					fk_order_id: order_id
				}, {
					fuzzy_field: undefined
				}).then(({
					data
				}) => {
					this.expressDetail = data[0] || {};
					this.$hide();
				});
			},
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $www-theme-bg;
	}
</style>
<style scoped lang="scss">
	.main {
		padding: 20rpx 0 20rpx;
	}

	/deep/.u-model__title {
		padding: 20rpx 0 !important;
		border-bottom: 1px solid #eeeeee;
	}

	.box-logistics-title {
		width: 130rpx;
	}

	.box-logistics {
		padding: 30rpx;
	}

	.refund-box {
		.tip {
			padding: 20rpx 0;
			margin-left: 160rpx;
			color: #999;
		}

		.price {
			color: var(--price);
		}
	}

	.main_item {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 0 20rpx;
		padding: 0 20rpx;
		margin-bottom: 24rpx;

		.title_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			height: 78rpx;
			border-bottom: 1px solid #f5f5f5;

			.no_l {
				font-size: 30rpx;
			}

			.no_r {
				font-size: 30rpx;
				color: var(--color);
			}

			.title {
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	}
	.copy{
		width: 100rpx;
		background-color: var(--color);
		color: #fff;
		font-size: 24rpx;
		border-radius: 30rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.prod_item {
		padding: 20rpx 0 24rpx;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		align-items: center;

		.prod_img {
			width: 178rpx;
			height: 178rpx;
			margin-right: 14rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.prod_cont {
			flex: 1;
			overflow: hidden;
			padding: 4rpx 0;
			height: 178rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.prod_name {
				line-height: 36rpx;
			}

			.prod_stand {
				display: flex;
				line-height: 32rpx;
				height: 32rpx;
				margin-top: 14rpx;

				.stand_name {
					flex: 1;
					overflow: hidden;
					font-size: 26rpx;
					color: #999;
				}

				.buy_num {
					font-size: 28rpx;
				}
			}

			.prce_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--price);

				.logistics {
					color: #ffffff;
					padding: 10rpx 15rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
					background-color: var(--color);
				}

				.price_sign {
					display: inline-block;
					font-size: 24rpx;
				}

				.price_num {
					display: inline-block;
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}
	}

	.cell_box {
		padding-top: 20rpx;

		.cell_item {
			display: flex;
			line-height: 40rpx;
			padding-bottom: 20rpx;

			.cell_l {
				margin-right: 14rpx;
			}

			.cell_r,
			.cell_label {
				flex: 1;
				overflow: hidden;
				text-align: right;
			}

			.cell_r {
				color: #999;

				.r_box {
					text-align: left;
					display: inline-block;
				}
			}
		}
	}

	.btns_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20rpx;
		padding-top: 60rpx;

		&.dan {
			justify-content: center;
		}

		.btn {
			width: calc(50% - 14rpx);
			text-align: center;
			line-height: 84rpx;
			color: #fff;
			background-color: var(--color);
			border-radius: 10rpx;
			overflow: hidden;

			&:nth-of-type(2n) {
				margin-right: 0;
			}
		}
	}
</style>
